<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<%@ include file="../../inc/global.jsp" %>
<!doctype html>
<html>
<head>
    <title><fmt:message key="jsp.title.mall.admin.nav.attr"/></title>
    <%@ include file="./head.jsp" %>
    <style type="text/css">
        #vals input[type=text] {width:100px;}
        #vals{margin:3px}
        .addVal, .delVal{cursor:pointer; margin:3px 0 3px 0; padding:1px 7px; height:auto; line-height: 22px; border: 1px solid #fff;}
        .addVal {margin-top: 7px}
        #vals .val:after {
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        #vals .val{width: 100%;}
        #dialog-confirm{display:none;}
    </style>
    <script type="text/javascript">
        var valItem = '<div class="val">别名：<input type="text" name="alias" value=""/>&nbsp;&nbsp;';
        valItem += '值：<input type="text" name="val" value=""/>';
        valItem += '<input type="hidden" name="valId" value=""/>';
        valItem += '<button class="delVal">删除</button></div>';
        $(function () {
            function bindDelVal() {
                $('.delVal').unbind();
                $('#vals').find('.delVal').each(function(){
                    $(this).click(function(){
                        $(this).parent().remove();
                    });
                });
            }
            $('.addVal').click(function(){
                $($('#vals')).prepend(valItem);
                bindDelVal();
                return false;
            });
            $($('#vals')).prepend(valItem);
            bindDelVal();
            function verifyString(s) {
                if(s == undefined || s == null) {
                    return '';
                }
                else {
                    return s;
                }
            }
            $('#save').click(function() {
                var _aliasArray = $('input[type=text][name="alias"]');
                var _valArray = $('input[type=text][name="val"]');
                var _valIdArray = $('input[type=hidden][name="valId"]');
                var aliasArray = new Array();
                var valArray = new Array();
                var valIdArray = new Array();
                for(var i=0; i<_aliasArray.length; i++) {
                    aliasArray[i] = $(_aliasArray[i]).val();
                    valArray[i] = $(_valArray[i]).val();
                    valIdArray[i] = $(_valIdArray[i]).val();
                    //alert('alias:'+aliasArray[i]+',val:'+valArray[i]+',valId:'+valIdArray[i]);
                }
                var isRequired = verifyString($('input[name=isRequired]:checked').val());
                var isImage = verifyString($('input[name=isImage]:checked').val());
                var isSale = verifyString($('input[name=isSale]:checked').val());
                var isMultiple = verifyString($('input[name=isMultiple]:checked').val());
                var name = verifyString($('#name').val());
                var navId = verifyString($('#navId').val());
                var navAttrId = verifyString($('#navAttrId').val());
                $.ajax({
                    url:'/mall/adm/ajax/nav/attr/doSave',
                    type:'POST',
                    data:{
                        'name':name,
                        'isRequired':isRequired,
                        'isImage':isImage,
                        'isSale':isSale,
                        'isMultiple':isMultiple,
                        'navId':navId,
                        'navAttrId':navAttrId,
                        'aliasArray':aliasArray,
                        'valArray':valArray,
                        'valIdArray':valIdArray
                    },
                    traditional: true,
                    success:function(data){
                        var json = $.parseJSON(data);
                        $( "#dialog-confirm" ).dialog({
                            resizable: false,
                            height:140,
                            width: 380,
                            modal: true,
                            closeText: "关闭",
                            closeOnEscape: true,
                            position: { my: "left buttom", at: "left top-80", of:($('#save'))},
                            buttons: {
                                "继续添加": function() {
                                    window.location = "/mall/adm/nav/attr/create?navId=${nav.id}";
                                },
                                "返回属性列表": function() {
                                    window.location = "/mall/adm/nav/attr?navId=${nav.id}";
                                }
                            }
                        });
                    },
                    error:function(){
                        alert('操作失败！')
                    }
                });
            });
            $(window).resize(function() {
                $( "#dialog-confirm" ).dialog({
                    position: { my: "left buttom", at: "left top-80", of:($('#save'))}
                });
            });
        });
    </script>
</head>
<body>
<div id="dialog-confirm">
属性保存成功，您可以在下面选择继续添加属性，或者返回到属性列表管理属性！
</div>
<div class="main">
    <div class="wrapper">
        <%@include file="../header.jsp" %>
        <%@include file="./sidebar.jsp"%>
        <!-- sidebar end -->
        <div class="content content-form">
            <div class="menu-tab">
                <ul>
                    <li><a href="/mall/adm/nav">分类管理</a></li>
                    <li><a href="/mall/adm/nav/attr?navId=${nav.id}">${nav.name} <fmt:message key="jsp.menu-tab.mall.admin.nav.attr.list"/></a></li>
                    <c:if test="${empty navAttrVO}">
                        <li class="slt"><a href="/mall/adm/nav/attr/create?navId=${nav.id}"><fmt:message key="jsp.menu-tab.mall.admin.nav.attr.add"/></a></li>
                    </c:if>
                    <c:if test="${!empty navAttrVO}">
                        <li><a href="/mall/adm/nav/attr/create?navId=${nav.id}"><fmt:message key="jsp.menu-tab.mall.admin.nav.attr.add"/></a></li>
                        <li class="slt"><a href="/mall/adm/nav/attr/update?navId=${nav.id}&navAttrId=${navAttrVO.attrRelation.id}"><fmt:message key="jsp.menu-tab.mall.admin.nav.attr.update"/></a></li>
                    </c:if>
                </ul>
            </div>
            <table>
                <tr>
                    <th>所属分类</th>
                    <td>
                        <c:forEach items="${twig}" var="item" varStatus="s">
                            ${item.name} <c:if test="${!s.last}">&gt;</c:if>
                        </c:forEach>
                    </td>
                </tr>
                <tr>
                    <th>名称</th>
                    <td><input type="text" id="name" name="name" value="${navAttrVO.attrName.name}"/></td>
                </tr>
                <tr>
                    <th>必选/可选</th>
                    <td>
                        <label for="isRequired_0"><input type="radio" id="isRequired_0" name="isRequired" value="0" <c:if test="${!navAttrVO.attrRelation.isRequired}">checked</c:if>/>可选</label>
                        <label for="isRequired_1"><input type="radio" id="isRequired_1" name="isRequired" value="1" <c:if test="${navAttrVO.attrRelation.isRequired}">checked</c:if>/>必选</label>
                    </td>
                </tr>
                <tr>
                    <th>多选/单选</th>
                    <td>
                        <label for="isMultiple_0"><input type="radio" id="isMultiple_0" name="isMultiple" value="0" <c:if test="${!navAttrVO.attrRelation.isMultiple}">checked</c:if>/>单选</label>
                        <label for="isMultiple_1"><input type="radio" id="isMultiple_1" name="isMultiple" value="1" <c:if test="${navAttrVO.attrRelation.isMultiple}">checked</c:if>/>多选</label>
                    </td>
                </tr>
                <tr style="display: none;">
                    <th>描述属性/销售属性</th>
                    <td>
                        <label for="isSale_0"><input type="radio" id="isSale_0" name="isSale" value="0" <c:if test="${!navAttrVO.attrRelation.isSale}">checked</c:if>/>描述属性</label>
                        <label for="isSale_1"><input type="radio" id="isSale_1" name="isSale" value="1" <c:if test="${navAttrVO.attrRelation.isSale}">checked</c:if>/>销售属性</label>
                    </td>
                </tr>
                <tr>
                    <th valign="top">参数值</th>
                    <td>
                        <button class="addVal">增加选项</button>
                        <div id="vals">
                            <c:forEach var="item" items="${navAttrVO.attrValList}">
                            <div class="val">
                                别名：<input type="text" name="alias" value="${item.alias}"/>&nbsp;&nbsp;
                                值：<input type="text" name="val" value="${item.val}"/>
                                <input type="hidden" name="valId" value="${item.id}"/>
                                <button class="delVal">删除</button>
                            </div>
                            </c:forEach>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" id="save" name="save" value="<fmt:message key="message.save.sure" />"/>
                        <input type="hidden" id="navId" name="navId" value="${nav.id}"/>
                        <input type="hidden" id="navAttrId" name="navAttrId" value="${navAttrVO.attrRelation.id}"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>